<template>
  <div>
    <el-dialog
      title="编辑角色"
      :visible="showRoleDialog"
      width="80%"
      @close="cancel"
    >
    <el-checkbox-group v-model="roleIds">
        <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id">
          {{item.name}}
        </el-checkbox>
   
    </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="sure"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {getRoleList} from "@/api/setting.js"
import {getUserDetailById,putAssignRoles} from "@/api/employees.js"
export default {
    props:{
        showRoleDialog:{
            type:Boolean,
            default:false,
        },
        userId:{
          type:String,
          default:null
        }
    },
    data(){
        return{
            roleIds:[],
            checkList:[]
        }
    },
    created(){
      this.getRoleList()
    },
    methods:{
        async getRoleList(){
          const {rows}= await getRoleList({page:1,pagesize:20})
          this.checkList=rows 
          console.log("this.checkList",this.checkList) 
        },
        async getUserDetailById(id){
          const {roleIds}=await getUserDetailById(id)
          this.roleIds=roleIds
          console.log("this.roleIds",this.roleIds) 
        },
        cancel(){
            this.$emit("update:showRoleDialog",false)
        },
       async sure(){
          await putAssignRoles({roleIds:this.roleIds,id:this.userId})
          await this.$message.success("添加角色成功")
          this.$emit("update:showRoleDialog",false)
        }
    }
}
</script>
